<template>
  <div v-cloak>
    <div class="head">购物车</div>
    <table cellpadding="5" cellspacing="0">
      <!-- <tr>
          <td><input type="checkbox" /></td>
          <td><img src="wuxiangguazi.jpg" /></td>
          <td>五香瓜子<span>19</span></td>
          <td>
            <button>-</button>
            <input type="text" />
            <button>+</button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td><img src="wuxiangguazi.jpg" /></td>
          <td>五香瓜子<span>19</span></td>
          <td>
            <button>-</button>
            <input type="text" />
            <button>+</button>
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td><img src="wuxiangguazi.jpg" /></td>
          <td>五香瓜子<span>19</span></td>
          <td>
            <button>-</button>
            <input type="text" />
            <button>+</button>
          </td>
        </tr> -->
      <tr v-for="(item, index) in cartlist" :key="index">
        <td v-if="item.check">
          <input type="checkbox" checked @click="checkbtn(index)" />
        </td>
        <td v-else><input type="checkbox" @click="checkbtn(index)" /></td>
        <td><img :src="item.imgurl" /></td>
        <td>
          {{ item.title }}<span>{{ item.price }}</span>
        </td>
        <td>
          <button @click="min(index)">-</button>
          <input type="text" :value="item.num" />
          <button @click="add(index)">+</button>
        </td>
      </tr>
    </table>

    <!-- <div class="footer">
        <input type="checkbox" />全选
        <i>总数量：100</i>
        <i>总价：1000</i>
      </div> -->
    <div class="footer">
      <em v-if="allCheck == cartlist.length">
        <input type="checkbox" checked @click="allCheckbtn" />全选
      </em>
      <em v-else> <input type="checkbox" @click="allCheckbtn" />全选 </em>

      <i>总数量：{{ allNum }}</i>
      <i>总价：{{ allPrice }}</i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allCheck: 0, //选中条数
      allPrice: 0,
      allNum: 0,
      //模拟购物车数据
      cartlist: [
        {
          id: 1,
          imgurl: "https://i.loli.net/2021/04/29/YqZCykhzotGmx6D.jpg",
          title: "瓜子",
          price: 30,
          num: 1,
          check: false, //记录是否选中
        },
        {
          id: 2,
          imgurl: "https://i.loli.net/2021/04/29/YqZCykhzotGmx6D.jpg",
          title: "花生",
          price: 20,
          num: 1,
          check: false,
        },
        {
          id: 3,
          imgurl: "https://i.loli.net/2021/04/29/YqZCykhzotGmx6D.jpg",
          title: "西瓜子",
          price: 40,
          num: 2,
          check: false,
        },
      ],
    };
  },
  methods: {
    checkbtn(i) {
      console.log(this.cartlist[i].check);
      this.cartlist[i].check = !this.cartlist[i].check;

      this.getAllNum();
      this.getAllPrice();
      this.getAllCheck();
    },
    allCheckbtn(e) {
      console.log(e.target.checked);
      if (e.target.checked) {
        for (var i = 0; i < this.cartlist.length; i++) {
          this.cartlist[i].check = true;
        }
        this.getAllNum();
        this.getAllPrice();
      } else {
        for (var i = 0; i < this.cartlist.length; i++) {
          this.cartlist[i].check = false;
        }
        this.getAllNum();
        this.getAllPrice();
      }
    },
    getAllNum() {
      var num = 0;
      for (var i = 0; i < this.cartlist.length; i++) {
        if ((this.cartlist[i].check = true)) {
          num += parseInt(this.cartlist[i].num);
        }
      }
      this.allNum = num;
    },
    getAllPrice() {
      var num = 0;
      for (var i = 0; i < this.cartlist[i].length; i++) {
        if (this.cartlist[i].check == true) {
          num += parseInt(this.cartlist[i].num) * this.cartlist[i].price;
          console.log(num);
        }
      }
      console.warn(num);
      this.allPrice = num;
      console.error(this.allPrice);
    },
    getAllCheck() {
      var num = 0;
      for (var i = 0; i < this.cartlist.length; i++) {
        if (this.cartlist[i].check == true) num++;
      }
      this.allCheck = num;
    },
    min(index) {
      if (this.cartlist[index].num == 1) {
        return;
      } else {
        this.cartlist[index].num--;
        this.getAllNum();
        this.getAllPrice();
      }
    },
    add(index) {
      this.cartlist[index].num++;
      this.getAllNum();
      this.getAllPrice();
    },
  },
};
</script>

<style>
.redColor {
  color: rebeccapurple;
}
</style>
